'use strict';
import React, { FC, ReactElement, useState, useEffect } from 'react';
import { Row, Col, Form, Input, Select, Table, Space, Tag, Button } from 'antd';
import { history } from 'umi';
import type { ColumnsType } from 'antd/lib/table';
import Test from './test';
import Text from './text';
import './index.less';
import commonStyle from '../publicStyle';
import { sendWhiteList } from '@/services/index';
import { DataSourceType, SendWhiteListParams } from './lotteryWhiteList';
const { Item } = Form;
const { Option } = Select;
const { mt20, mr30, mr50, mr10 } = commonStyle;

const WhiteList: FC = (): ReactElement => {
  const [total, setTotal] = useState(0);
  const [params, setParams] = useState<SendWhiteListParams>({
    activityName: '',
    activityState: 1, //1 待审核 2进行中 3 未开始 4 已驳回 5已结束
    page: 1,
    pageSize: 10,
  });
  const [dataSource, setDataSource] = useState<DataSourceType[]>([]);

  const columns: ColumnsType<DataSourceType> = [
    {
      title: '活动名称',
      dataIndex: 'activityName',
      key: 'activityName',
    },
    {
      title: '活动状态',
      dataIndex: 'activityStatusLabel',
      key: 'activityStatusLabel',
    },
    {
      title: '抽奖活动时间',
      dataIndex: 'activityTime',
      key: 'activityTime',
    },
    {
      title: '公开方式',
      key: 'isEveryoneExpose',
      dataIndex: 'isEveryoneExposeLabel',
      render: (_, { isEveryoneExpose, isEveryoneExposeLabel }) => (
        <>
          <Tag
            key={isEveryoneExposeLabel}
            color={isEveryoneExpose ? 'blue' : ''}
          >
            {isEveryoneExposeLabel}
          </Tag>
        </>
      ),
    },
    {
      title: 'Action',
      key: 'action',
      render: (record: DataSourceType) => (
        <Space size="middle">
          <a
            onClick={() => {
              history.push('/setWhiteList', {
                record,
              });
            }}
          >
            设置白名单
          </a>
        </Space>
      ),
    },
  ];
  function tablePageChange(page: number, size: number) {
    const newParams = { ...params };
    newParams.page = page;
    setParams(newParams);
    console.log('页数改变', size, page);
  }
  function handleFormFinish(values: {
    activityName: string | undefined;
    activityState: string | undefined;
  }) {
    console.log(values);
    const newParams = { ...params };
    newParams.activityName = values.activityName || '';
    newParams.activityState = Number(values.activityState) || 1;
    newParams.page = 1; //搜索重置页数
    setParams(newParams);
  }

  useEffect(() => {
    getData();
  }, [params.page, params.activityName, params.activityState, params.pageSize]);
  function getData() {
    sendWhiteList(params).then((res) => {
      console.log(res.data);
      const { data } = res;
      setTotal(data?.total);
      setDataSource(
        data?.rows.map((item: DataSourceType) => {
          item.activityStatusLabel =
            activityStatusDictionaries[item.activityStatus];
          item.isEveryoneExposeLabel = item.isEveryoneExpose
            ? '所有用户'
            : '白名单用户';
          item.activityTime = item.startDate + ' - ' + item.endDate;
          return item;
        }),
      );
    });
  }
  return (
    <div className="white-list">
      <Row style={mt20}>
        <Col className="white-list-title">抽奖白名单</Col>
      </Row>

      <Form
        onFinish={handleFormFinish}
        initialValues={{ activityState: '1' } as { activityState: string }}
      >
        <Row style={mt20}>
          <Col>
            <Item name="activityName" label="活动名称" style={mr30}>
              <Input placeholder="请输入" />
            </Item>
          </Col>

          <Col style={mr50}>
            <Item name="activityState" label="活动状态">
              <Select style={{ width: 120 }} placeholder="请选择">
                {selectWhiteList.map((item) => (
                  <Option value={item.value} key={item.value}>
                    {item.label}
                  </Option>
                ))}
              </Select>
            </Item>
          </Col>
          <Col>
            <Button type="primary" style={mr10} htmlType="submit">
              搜索
            </Button>
            <Button htmlType="reset" onClick={handleFormFinish}>
              重置
            </Button>
          </Col>
        </Row>
      </Form>
      <Table
        columns={columns}
        dataSource={dataSource}
        rowKey={(record) => record.id}
        pagination={{
          total,
          showTotal: () => `共 ${total} 条`,
          onChange: tablePageChange,
        }}
      />

      {/* <Test />
      <Text /> */}
    </div>
  );
};
export default WhiteList;

//1 待审核 2进行中 3 未开始 4 已驳回 5已结束
const selectWhiteList = [
  {
    value: '1',
    label: '待审核',
  },
  {
    value: '2',
    label: '进行中',
  },
  {
    value: '3',
    label: '未开始',
  },
  {
    value: '4',
    label: '已驳回',
  },
  {
    value: '5',
    label: '已结束',
  },
];
const activityStatusDictionaries = [
  '全部',
  '待审核',
  '进行中',
  '未开始',
  '已驳回',
  '已结束',
];

//
